<template>
<view>
	<!-- <view class="act-navlist">
		<view v-for="(item,index) in navlist" :key="index" @click="navclick(item.id)">
			<view class="navlist-box">{{item.name}}</view>
		</view>
	</view> -->
	<v-tabs v-model="currentNewsIndex"
	 :tabs="navlist"
	 activeColor="#000"
	 lineColor="#24cba9"
	 lineHeight="5rpx"
	 :lineScale="1"
	 fontSize="34rpx"
	  @change="navclick"
	  ></v-tabs>
<!-- <view class="content">
        	<sl-filter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList" @result="result"></sl-filter>
     </view> -->
<!-- <view v-for="(item, idx) in actList" :key="idx" class="act_sec" :data-recruit-id="item.id">
    <view class="img_sec">
        <image class="headimg" mode="scaleToFill" :src="item.deptheadurl?item.deptheadurl:'/static/images/defaultorg.png'"></image>
        <image class="thumb" mode="aspectFill" :src="item.thumb"></image>
    </view>
    <view class="title">{{item.title}} | {{item.orgName}}</view>
    <view class="desc">{{item.content}} </view>
	<view style="padding-top: 5px;"> <button @click="open(item.id)"  type="primary">点单</button></view>
	
	</view> -->
<view @tap="toDetail" v-for="(item, idx) in actList" :key="idx" :data-recruit-id="item.id">
		<view class="orderlist-box">
			<view class="orderlist_top">{{item.title}} </view>
			<view class="orderlist_detalie">
				<image src="../../../static/images/icon_rec_amt.png" mode=""></image>姓名： {{item.linkUser}}
			</view>
			<view class="orderlist_detalieright">
				<image src="../../../static/images/icon_rec_location.png" mode=""></image>地址： <view
					style="width: 200rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;display: inline-block;line-height: 22rpx;">
					{{item.address}}
				</view>
			</view>
			<view class="orderlist_detalieleft">类型：{{item.serviceType}}</view>
			<view class="orderlist_footer">
	
				<image src="../../../static/images/icon_rec_timeline.png" mode=""></image>期望服务时间：{{item.serviceTime}}
			</view>
			<!-- <view class="orderlist_bottomright">
			已结束
	</view> -->
			<view class="orderlist_bottomright" style="color: #ff0000;" v-if="item.status==0">
				待审核
			</view>
			<view class="orderlist_bottomright" style="color: #ff0000;" v-else-if="item.status==1">
				已审核
			</view>
			<view class="orderlist_bottomright" style="color: #ff0000;" v-else>
				被驳回
			</view>
		</view>
		</view>
<view class="no_data" v-if="actList.length===0">暂无数据~</view> 
 <view class="no_more" v-if="actList.length!==0&&noMore">没有更多数据了~</view>
</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
          var t = require("../../../utils/request.js"),
		 config = require("../../../utils/config.js").config,
         a = function (t) {
         return t && t.__esModule ? t : { default: t};
         }(require("../../../utils/api.js")),
         e = require("../../../utils/util.js"),
         i = a.default.recruitList,
         o = a.default.dictionaryCounty,
         app = getApp();
	     import {myDoService,gettypelist} from '../../../api/service.js'
export default {
  data() {
    return {
		currentNewsIndex: 0,
		 navlist:['全部','待审核','已审核','被驳回'],
		themeColor: '#000000',
						titleColor: '#666666',
						filterResult: '',
		startTime:'',
		endTime:'',
		nowId:'',
	  remark:'',
	  datetimerange:'',
	  need:'',
      level: 2,
      provinceId: "",
      cityId: "",
      page: 1,
      pageSize: 1,
      county: "全部",
      countyId: "",
      countyIdx: 0,
      category: "全部活动",
      categoryId: "",
      categoryIdx: 0,
      order: "智能筛选",
      orderIdx: 0,
      orderId: "",
      countyList: [{
        name: "全部",
        id: "",
        _id: "",
        code: ""
      }],
      categoryList: [{
        name: "全部活动",
        value: "",
        _id: ""
      }],
      orderList: [{
        name: "智能筛选",
        value: "",
        _id: ""
      }],
      actList: [{name:'1',id:1},{name:'1',id:1},{name:'1',id:1},{name:'1',id:1}],
      noMore: !1,
	
    };
  },

   components: {slFilter},
  props: {},
  onLoad: function (t) {
    var a = this;

    try {
      var i = uni.getStorageSync("areaId");
      console.log(i), this.setData({
        provinceId: i.p_id,
        cityId: i.c_id,
        countyId: i.d_id,
        level: i.level
      });
    } catch (t) {
      console.log(t);
    }

    this.getServiceData()
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {
    var t = this;
    this.setData({
      page: 1,
      noMore: !1
    })
	 this.getServiceData()
	 },
  onReachBottom: function () {
    var t = this;

    if (!this.noMore) {
      var a = this.page;
      this.setData({
        page: ++a
      })
	  this.getServiceData()
    }
  },
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  watch:{
	  datetimerange(newval) {
	  	console.log('范围选:', this.datetimerange);
	  }
  },
  methods: {
	 navclick(index){
	 		  if(index==0){ // this.actLists=this.actList
	 			    this.type=''
	 		  }else if(index==2){
	 			  this.type=''
	 		  }else if(index==1){
	 			  this.type=0
	 		  }
	 		  else if(index==3){
	 			this.type=1
	 		  }
	 		  else if(index==4){
	 			  this.type=2
	 		  }
	 		  this.getServiceData()
	 		 
	 },
	  addService(id){
		  let uid = app.globalData.zyzId
		  if(!uid){
			  uni.navigateTo({
			  	url:"/pages/entry/login"
			  })
		  }else{
			 uni.navigateTo({
			   url: "/pages/act/detail?id=" + t.currentTarget.dataset.recruitId
			 });
		  }
		  
	  },
	  getServiceData(){
		  var that = this
		  var uid = app.globalData.zyzId
		  if(!uid){
			  uni.navigateTo({
			  	url:"/pages/entry/login"
			  })
		  }
		  myDoService({"pageSize":this.pageSize,"pageNo":this.page,"volunteerId":uid, status:this.type}).then((ret)=>{console.log(ret)
			  if (ret.success) {
			    ret.data.length < 10 && that.setData({
			      noMore: !0
			    });
			    var i = [];
			    ret.data.rows.forEach(function (t) {
			  				t.thumb = t.imageUrl ? config.host + "/sysFileInfo/preview?id=" + t.imageUrl : "/static/images/defaultorg.png";
			  				i.push(t);
			  			}), that.setData({
			      actList: i
			    });
				gettypelist().then((ret) => {
					console.log(ret)
					this.typelist = ret.data
					for (let i in this.typelist) {
						for (let j in this.actList) {
							if (this.typelist[i].code == this.actList[j].serviceType) {
								console.log(this.typelist[i].code, this.actList[j].serviceType)
								this.actList[j].serviceType = this.typelist[i].value
								console.log(this.actList[j].serviceType)
							}
						}
				
					}
				})
			  }
		  })
	  },
    toDetail: function (t) {
   uni.navigateTo({
     url: "/pages/me/service/detail?id=" + t.currentTarget.dataset.recruitId
   }); 
   // uni.navigateTo({
   //    url: "/pages/service/detai"
   //  });
    }
  }
};
</script>
<style>
	@import '@/common/uni.css';
	.title {
	    padding: 5px 13px;
	}

page {
    width: 100%;
    height: auto;
    /* min-height: 100%; */
    background: #fff;
    /* padding-top: 100rpx; */
    padding-bottom: 60rpx;
}
.orderlist-box{
	position: relative;
	margin: 10rpx;
	width: 97%;
	height: 300rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	box-shadow:0rpx 0rpx 10rpx #d5d5d5;
}
.orderlist_top{
	position: absolute;
	left: 40rpx;
	top: 30rpx;
	font-weight: 700;
	    color: #333;
}
.orderlist_detalie{
	position: absolute;
	left: 40rpx;
	top: 80rpx;
	font-weight: 700;
	    color: #5b5b5b;
		font-size: 18rpx;
}
.orderlist_detalie image{
	width: 25rpx;
	height: 25rpx;
	margin-right: 10rpx;
}
.orderlist_detalieright{
	position: absolute;
	right: 40rpx;
	top: 80rpx;
	font-weight: 700;
	    color: #5b5b5b;
		font-size: 18rpx;
}
.orderlist_detalieright image{
	width: 25rpx;
	height: 25rpx;
	margin-right: 10rpx;
}
.orderlist_detalieleft{
	position: absolute;
	left: 70rpx;
	top: 140rpx;
	font-weight: 700;
	    color: #5b5b5b;
		font-size: 18rpx;
}
.orderlist_bottomright{
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
	font-size: 18rpx;
	color: #999999;
}
.orderlist_footer{
	width: 100%;
	border-top: 1rpx solid #f0f0f1;
	position: absolute;
	bottom: 30rpx;
	padding-top: 30rpx;
	font-size: 20rpx;
	line-height: 20rpx;
	color: #333333;
}
.orderlist_footer image{
	/* bottom: -30rpx; */
	width: 25rpx;
	height: 25rpx;
	margin-left: 30rpx;
	margin-right: 10rpx;
}
.act-navlist{
	height: 90rpx;
}
.act-navlist .navlist-box{
	display: flex;
	/* width: 150rpx; */
	padding: 20rpx 20rpx;
	float: left;
}
.act-navlist .navlist-box:hover{
	color: #00B99E;
	border-bottom: 1rpx solid #00B99E;
}
</style>